<template>
  <div>
    <h2 class="title">实时数据</h2>
    <div v-if="!latest" class="muted">正在加载...</div>
    <div v-else class="grid">
      <div class="kv"><span>时间</span><strong>{{ time }}</strong></div>
      <div class="kv"><span>出水浊度 (NTU)</span><strong>{{ latest.turbidityNTU }}</strong></div>
      <div class="kv"><span>流量 (L/min)</span><strong>{{ latest.flowLMin }}</strong></div>
      <div class="kv"><span>压力 (kPa)</span><strong>{{ latest.pressureKPa }}</strong></div>
      <div class="kv"><span>水泵转速 (rpm)</span><strong>{{ latest.pumpRpm }}</strong></div>
      <div class="kv"><span>变频器频率 (Hz)</span><strong>{{ latest.inverterHz }}</strong></div>
      <div class="kv"><span>阀门开度 (%)</span><strong>{{ latest.valveOpenPct }}</strong></div>
      <div class="kv"><span>状态</span><strong>{{ latest.status }}</strong></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted } from 'vue';
import { useDataStore } from '../stores/dataStore';

const store = useDataStore();
const latest = computed(() => store.latest);
const time = computed(() => latest.value ? new Date(latest.value.timestamp).toLocaleString() : '-');

onMounted(async () => {
  if (store.history.length === 0) await store.loadHistory();
  store.startPolling();
});
onUnmounted(() => store.stopPolling());
</script>

<style scoped>
.title { margin: 0 0 8px; font-size: 16px; }
.muted { color: #6b7280; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kv { display: flex; align-items: center; justify-content: space-between; padding: 8px; border: 1px dashed #e5e7eb; border-radius: 8px; background: #fafafa; }
.kv span { color: #6b7280; }
</style>



